import React, {useState, useEffect,useRef} from 'react';
import './page3.scss'
// 导入antd的表格组件
import {Table, Button, message, Popconfirm, Form, Input} from 'antd'

import axios from "axios";

function Page3(props) {
    // 定义一个ref对象，用它根Form组件进行绑定
    const form = useRef(null)
    // 学生表头数据
    const stuColumns = [
        {
            title: '学号',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: (_, record) => (
                <Popconfirm
                    title="提示"
                    description="确定删除吗"
                    onConfirm={() => {
                        delStu(record.id)
                    }}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button className='del' size='small'>删除</Button>
                </Popconfirm>

            ),
        }

    ];
    // 汽车表头数据
    const carColumns = [
        {
            title: '车牌',
            dataIndex: 'id',
            key: 'id'
        },
        {
            title:'车名',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title:'操作',
            dataIndex: 'action',
            key: 'action',
            render:(_,record)=>(
                <Popconfirm
                    title="提示"
                    description="确定删除吗"
                    onConfirm={() => {
                        delCar(record.id)
                    }}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button className='del' size='small'>删除</Button>
                </Popconfirm>
            )
        }
    ]

    useEffect(() => {
        getStudents()
        getCars()
    }, [])
    // 定义学生数据
    let [stu, setStu] = useState([])
    // 定义学生对象接收input中用户输入的内容
    let [addStu,setAddStu] = useState({id : '', name : '', age : '', sex : '',})
    // 定义汽车数据
    let [cars, setCars] = useState([])
    // 获取学生信息的方法
    let getStudents = () => {
        axios.get('http://localhost:3000/stu/list').then(({data}) => {
            // 表格在渲染时，需要自带唯一的key字段，这里我们选择学生id作为唯一key字段
            data.forEach(item => {
                item.key = item.id
            })
            setStu(data)
        })
    }
    // 获取汽车信息的方法
    let getCars = () => {
        axios.get('http://localhost:3000/car/list').then(({data}) => {
            data.map(item =>{
                item.key = item.id
            })
            setCars(data)
        })
    }
    // 删除学生方法
    const delStu = (id) => {
        console.log(id)
        axios.post('http://localhost:3000/stu/delete', {id}).then(({data}) => {
            if (data) {
                message.success('删除成功');
                getStudents()
            }
        })
    }
    // 删除汽车方法
    const delCar = (id) => {
        axios.post('http://localhost:3000/car/delete', {id}).then(({data}) => {
            if (data) {
                alert('删除成功')
                getCars()
            }
        })
    }
    const cancel = ()=>{
        // ref对象的current属性，获取的是所在的元素对象，这里获取的是Form组件
        // form组件对象的setFieldsValue方法，用于更新Form组件绑定的状态
        form.current.setFieldsValue({id : '', name : '', age : '', sex : '',})
        // 上面是情况表单的状态，这里才是清空数据的状态
        setAddStu({id : '', name : '', age : '', sex : '',})
    }
    // 添加学生
    const addStudent = async ()=>{
        let {data} = await axios.post('http://localhost:3000/stu/add',addStu)
        if(data) {
            message.success('添加成功')
            getStudents()
            cancel()
        }
    }
    return (
        <div className='page3'>
            <Form
                ref={form}
                name="basic"
                labelCol={{
                    span: 2
                }}
                wrapperCol={{
                    span: 8
                }}
                onFinish={() => {
                    addStudent()
                }}
                initialValues={addStu}
                onValuesChange={(changedValues, allValues) => {
                    console.log(changedValues, allValues)
                    setAddStu(allValues)
                }}
                autoComplete="off"
            >
                <Form.Item
                    label="学号"
                    name="id"
                    rules={[
                        {
                            required: true,
                            message: '请输入学号',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>

                <Form.Item
                    label="姓名"
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: '请输入姓名',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>

                <Form.Item
                    label="性别"
                    name="sex"
                    rules={[
                        {
                            required: true,
                            message: '请输入性别',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>

                <Form.Item
                    label="年龄"
                    name="age"
                    rules={[
                        {
                            required: true,
                            message: '请输入年龄',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>
                    <Button type="primary" htmlType="reset">
                        取消
                    </Button>
                </Form.Item>
            </Form>

            <h2>学生信息</h2>
            <Table pagination={{pageSize: 10}} columns={stuColumns} dataSource={stu}/>
            <h2>汽车信息</h2>
            <Table pagination={{pageSize: 10}} columns={carColumns} dataSource={cars}/>
            {/*<table>*/}
            {/*    <thead>*/}
            {/*    <tr>*/}
            {/*        <th>学号</th>*/}
            {/*        <th>姓名</th>*/}
            {/*        <th>性别</th>*/}
            {/*        <th>年龄</th>*/}
            {/*        <th>操作</th>*/}
            {/*    </tr>*/}
            {/*    </thead>*/}
            {/*    <tbody>*/}
            {/*    {*/}
            {/*        stu.map(item => {*/}
            {/*            return (*/}
            {/*                <tr key={item.id}>*/}
            {/*                    <td>{item.id}</td>*/}
            {/*                    <td>{item.name}</td>*/}
            {/*                    <td>{item.sex}</td>*/}
            {/*                    <td>{item.age}</td>*/}
            {/*                    <td>*/}
            {/*                        <button onClick={()=>{delStu(item.id)}}>删除</button>*/}
            {/*                    </td>*/}
            {/*                </tr>*/}
            {/*            )*/}
            {/*        })*/}
            {/*    }*/}
            {/*    </tbody>*/}
            {/*</table>*/}
            <h2>汽车信息</h2>
            <table>
                <thead>
                <tr>
                    <th>车牌</th>
                    <th>车名</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {
                    cars.map(item => {
                        return (
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.name}</td>
                                <td>
                                    <button onClick={() => {
                                        delCar(item.id)
                                    }}>删除
                                    </button>
                                </td>
                            </tr>
                        )
                    })
                }
                </tbody>
            </table>
        </div>
    );
}

export default Page3;
